@c-bg : #f0f0f0;
@c-lightGray : #ddd;
@c-lightOrange : #ffb800;
@c-wechat: #1ea02b;

//辅助函数
.full-window {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.animation(@animation-name,@animation-duration:0,@animation-timing-function:ease,@animation-iteration-count:1) {

    animation: @arguments;
    -moz-animation: @arguments;
    -webkit-animation: @arguments;
    -o-animation: @arguments;
}

//----------定义动画----------------------

@keyframes dialogEX {
    0% {
        height: 0;
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    100% {
        height: 100px;
        opacity: 1;
    }
}

@-moz-keyframes dialogEX /* Firefox */
{
    0% {
        height: 0;
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    100% {
        height: 100px;
        opacity: 1;
    }
}

@-webkit-keyframes dialogEX /* Safari 和 Chrome */
{
    0% {
        height: 0;
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    100% {
        height: 100px;
        opacity: 1;
    }
}

@-o-keyframes dialogEX /* Opera */
{
    0% {
        height: 0;
        opacity: 0;
    }
    5% {
        opacity: 0;
    }
    100% {
        height: 100px;
        opacity: 1;
    }
}

//------------------------------------------------

* {
    padding: 0;
    margin: 0;
}

html, body {
    background: @c-bg;
}

html, [placeholder] {
    font-family: '微软雅黑', arail, sans-serif;
}

.blank-sm {
    height: 8px;
    border-bottom: solid 1px @c-lightGray;
}

#question {
    .tips {
        text-align: center;
        padding: 8px 5px 0 5px;
        font-size: 12px;
    }

    .row {
        padding: 10px;
        background: white;
        border-bottom: solid 1px @c-lightGray;
    }

    .row > label {
        font-size: 14px;
        padding-left: 5px;
        position: absolute;
    }

    .row > input,
    .row > textarea,
    .row > select {
        background: transparent;
        border: none;
        display: block;
        margin: 0 20px 0 80px;
        font-size: 14px;
    }

    .row > input {
        width: 70%;
    }

    .row > textarea {
        width: 70%;
        resize: none;
    }

    .btn-captcha {
        padding: 10px;
        width: 100px;
        font-size: 14px;
        right: 0;
        position: absolute;
        background: @c-lightOrange;
        text-align: center;
        color: white;
    }

    .btn-captcha.un {
        background: @c-lightGray;
        color: #888;
    }

    .img-area {
        padding-top: 30px;
    }

    .img-area::after {
        content: '';
        display: block;
        clear: both;
    }

    .img {
        float: left;
        width: 80px;
        height: 80px;
        margin: 10px;
        border-radius: 6px;
    }

    .img-add {
        box-shadow: 0 0 0 2px @c-lightGray inset;
        background: url(../img/ic_plus.png) center no-repeat;
        background-size: 30px;
    }

    .img-normal {
        background: center no-repeat;
        background-size: cover;
    }

    .send-info {
        margin: 30px;
        border-radius: 999px;
        text-align: center;
        padding: 10px;
        font-size: 20px;
        color: white;
        background: @c-lightOrange;
    }
}

#recommend {
    .tattooCard {
        display: block;
        margin: 15px;
        border-radius: 6px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .up {
        box-shadow: 999px 999px 0 0 rgba(0, 0, 0, 0.7) inset;
        background: no-repeat center;
        background-size: cover;
        white-space: nowrap;
    }

    .avatar {
        width: 80px;
        height: 80px;
        margin: 15px;
        border-radius: 999px;
        border: solid 3px rgba(255, 255, 255, 0.2);
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
    }

    .info {
        text-align: left;
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
        padding-right: 15px;
    }

    .info h1 {
        font-size: 24px;
        padding-bottom: 6px;
        font-weight: normal;
        white-space: normal;
        color: white;
    }

    .info p {
        font-size: 16px;
        color: #c0c0c0;
    }

    .down {
        background: white;
        text-align: center;
    }

    .btn-wechat,
    .btn-card {
        display: inline-block;
        width: 45%;
        vertical-align: middle;
        padding: 10px 0;
        text-align: center;
    }

    .icon,
    span {
        vertical-align: middle;
        font-size: 14px;
    }

    .lr {
        display: inline-block;
        vertical-align: middle;
        width: 1px;
        height: 20px;
        background: #eee;
    }

    .btn-wechat {
        color: @c-wechat;
    }

    .btn-card {
        color: #8b817f;
    }

    #dialog {
        display: none;
        z-index: 50;
        .full-window;

        .shade {
            background: rgba(0, 0, 0, 0.3);
            .full-window;
        }

        .body {
            margin: 30px;
            position: relative;
            top: 100px;
            border-radius: 6px;
            overflow: hidden;
            z-index: 2;

            .title {
                background: white;
                text-align: center;
                color: @c-wechat;
                padding: 10px;

                * {
                    vertical-align: middle;
                }
            }

            .content {
                background: @c-wechat;
                height: 100px;
                text-align: center;
                padding: 10px;
                overflow: hidden;
                .animation(dialogEX, 0.3s, ease);

                &::after {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    height: 100%;
                }

                p {
                    color: white;
                    font-size: 20px;
                    display: inline-block;
                    vertical-align: middle;
                }
            }

        }
    }
}

#loading {
    position: fixed;
    z-index: 100;
    width: 100%;

    .shade {
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        .full-window
    }

    .load-body {
        width: 100%;
        position: relative;
        margin-top: 40%;
        z-index: 2;
        text-align: center;

        .area {

            .bar {
                background: rgba(255, 255, 255, 0.2);
                height: 2px;
                margin: 10px 20px;

                .bar-light {
                    height: 2px;
                    background: -webkit-linear-gradient(left, #ff6c00, #fffc00);
                    width: 0;
                    transition: width 0.2s;
                    box-shadow: 0 0 5px 1px rgba(211, 65, 0, 1);
                }
            }

        }

        p {
            color: @c-lightOrange;
            text-shadow: 0 0 5px rgba(211, 65, 0, 0.75);
            font-size: 12px;
        }
    }
}